<template>
  <el-dialog
    v-model="showForm"
    title="备注订单"
    width="600px"
    :close-on-click-modal="false"
    :close-on-destroy="true"
  >
    <el-form
      ref="logisticsFormRef"
      :model="logisticsForm"
      :rules="logisticsFormRule"
    >
      <el-form-item
        label="备注"
        prop="remark"
      >
        <el-input
          v-model="logisticsForm.remark"
          :rows="3"
          maxlength="200"
          show-word-limit
          type="textarea"
        />
      </el-form-item>
    </el-form>

    <div class="footer">
      <el-button @click="handleLogisticsInfoClose">
        取消
      </el-button>
      <el-button
        type="primary"
        @click="submitForm(logisticsFormRef)"
      >
        确定
      </el-button>
    </div>

    <div class="operation-log">
      <el-table :data="orderData.orderRemarkRecords ?? []">
        <el-table-column
          label="备注内容"
          prop="remark"
        />
        <el-table-column
          label="备注时间"
          width="180"
          prop="createTime"
        >
          <template #default="props">
            {{formatTime(props.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column
          label="备注人"
          width="120"
          prop="remarkUserName"
        />
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { setRemarkOrder } from "@/api/pointsMall";
import { IOrderPageRow } from "@/api/modules/pointsMall";
import {UnwrapRef} from "vue";
import moment from "moment";


const props = defineProps<{
  show: boolean,
  orderData: IOrderPageRow
}>()

const emits = defineEmits(['update:show', 'refresh'])
const Route = useRoute();
const orderData: any = toRef(props, 'orderData')
const show = toRef(props, 'show')
const name = ref('')
const logisticsFormRef = ref<FormInstance>()
const logisticsFormRule = reactive<FormRules>({
  remark: [{
    required: true,
    message: '备注是必填项',
    trigger: 'blur',
  }],
})

const logisticsForm = reactive({
  remark: '',
  orderId: Route.query.id,
})

const showForm = computed({
  get() {
    return props.show
  },
  set() {
    emits('update:show', false)
  }
})

watch(showForm, () => {
  if (showForm.value){
    logisticsForm.remark = orderData.value.ext.remark
  }
})

const handleLogisticsInfoClose: () => void = () => {
  showForm.value = false
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      handleLogisticsInfoConfirm()
    } else {
      console.log('error submit!', fields)
    }
  })
}
const handleLogisticsInfoConfirm: () => void = async() => {
  let rs: any = await setRemarkOrder(logisticsForm)
  if (rs.code === 200) {
    ElMessage.success("备注更新成功");
    clearForm()
    handleLogisticsInfoClose()
    refresh()
  }
}

const refresh = () => {
  emits('refresh')
}

const clearForm = () => {
  logisticsForm.remark = ''
}

const formatTime = (timestamp: number) => {
  return timestamp ? moment(timestamp).format("YYYY.MM.DD HH:mm:ss") : '';
}


</script>

<style scoped lang="scss">
.footer {
  padding: 10px 20px;
  margin: 0 -20px 20px;
  display: flex;
  justify-content: flex-end;
  border-top: solid 1px #f2f3f5;
  border-bottom: solid 1px #f2f3f5;
}
</style>
